import { ref, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
import menuStore from '@/pinia/menuStore'
const { isMouseLock } = storeToRefs(menuStore())

const mouseType = {
  mousedown: {
    0: 1,
    1: 3,
    2: 5,
    3: 7,
    4: 9, // 前进
    33: 11 // 后退
  },
  mouseup: {
    0: 2,
    1: 4,
    2: 6,
    3: 8,
    4: 10, // 前进
    33: 12 // 后退
  },
  mousemove: {
    0: 0
  }
}
const formatPrecisionX = (data, ele) => {
  return Math.round((data * 65535) / ele.offsetWidth)
}
const formatPrecisionY = (data, ele) => {
  return Math.round((data * 65535) / ele.offsetHeight)
}
export function useMouse() {
  const offsetX = ref(0)
  const offsetY = ref(0)
  let ele = null
  let p2p = null
  let remoteId = null
  let xMovement = 0
  let yMovement = 0
  // let lastX = 0
  // let lastY = 0

  // 发送消息
  const sendMessage = (event) => {
    if (isMouseLock.value) {
      if (event.button !== 3) {
        offsetX.value += event.movementX
        offsetY.value += event.movementY
      }
    } else {
      offsetX.value = event.offsetX
      offsetY.value = event.offsetY
    }
    const xPos = formatPrecisionX(offsetX.value, ele) || 0
    const yPos = formatPrecisionY(offsetY.value, ele) || 0
    xMovement = event.movementX || 0
    yMovement = event.movementY || 0
    // xMovement = lastX ? event.clientX - lastX : 0
    // yMovement = lastY ? event.clientY - lastY : 0
    // lastX = event.clientX
    // lastY = event.clientY
    const eventData = {
      mask: mouseType[event.type][event.button],
      xPos,
      yPos,
      xMovement,
      yMovement
      // xMovement: formatPrecisionX(xMovement, ele) || 0,
      // yMovement: formatPrecisionY(yMovement, ele) || 0
    }
    const params = {
      endpointType: 1,
      events: [
        {
          eventType: 'mouse',
          timestamp: new Date().getTime() + '',
          eventData: JSON.stringify(eventData)
        }
      ]
    }
    console.log('发送鼠标数据')
    console.log(eventData)
    p2p && p2p.send(remoteId, JSON.stringify(params))
  }
  const addWheelEvent = (event) => {
    let type = null
    if (event.deltaY < 0) {
      // 滚轮向上
      type = 'mouseup'
    } else {
      // 滚轮向下
      type = 'mousedown'
    }
    sendMessage({
      ...event,
      button: 3,
      type
    })
  }
  // 添加鼠标移动事件
  const addMouseMove = (event) => {
    sendMessage(event)
  }
  // 添加鼠标按下事件
  const addMouseDown = (event) => {
    if (event.button == 3) event.button = 33
    sendMessage(event)
  }
  // 添加鼠标抬起事件
  const addMouseUp = (event) => {
    if (event.button == 3) event.button = 33
    sendMessage(event)
  }

  const addMouseEvent = (el, p2pObj, id) => {
    console.log('监听鼠标事件...')
    ele = el
    p2p = p2pObj
    remoteId = id
    xMovement = Math.floor(ele.offsetWidth / 2)
    yMovement = Math.floor(ele.offsetHeight / 2)
    ele.addEventListener(
      'click',
      (event) => {
        if (offsetX.value) return
        offsetX.value = event.pageX
        offsetY.value = event.pageY
      },
      false
    )
    ele.addEventListener('mousemove', addMouseMove)
    ele.addEventListener('mousedown', addMouseDown)
    ele.addEventListener('mouseup', addMouseUp)
    window.addEventListener('mousewheel', addWheelEvent)

    // 阻止鼠标右键事件
    document.oncontextmenu = (event) => {
      event.preventDefault()
    }
  }
  // 移除鼠标监听事件
  const removeMouseEvent = () => {
    ele.removeEventListener('mousemove', addMouseMove)
    ele.removeEventListener('mousedown', addMouseDown)
    ele.removeEventListener('mouseup', addMouseUp)
    window.removeEventListener('mousewheel', addWheelEvent)
  }
  onUnmounted(() => {
    try {
      removeMouseEvent()
    } catch (err) {
      console.log('remove error')
    }
  })
  return { offsetX, offsetY, addMouseEvent, removeMouseEvent }
}
